<template>
  <div class="chart-container">
    <div class="chart-title">舆情热度排名</div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'HotRegionsChart',
  data() {
    return {
      chart: null,
      regions: [
        { name: '蜀山区', value: 120, trend: 15 },
        { name: '庐阳区', value: 100, trend: -5 },
        { name: '包河区', value: 80, trend: 8 },
        { name: '瑶海区', value: 70, trend: 12 },
        { name: '经开区', value: 60, trend: -3 },
        { name: '新站区', value: 50, trend: 6 },
        { name: '高新区', value: 40, trend: 10 },
        { name: '滨湖区', value: 30, trend: 4 }
      ]
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['蜀山区', '庐阳区', '包河区', '瑶海区', '经开区', '新站区', '高新区', '滨湖区'],
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            margin: 16
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          type: 'bar',
          data: [120, 100, 80, 70, 60, 50, 40, 30],
          barWidth: '50%',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(255, 255, 255, 0.05)'
          },
          label: {
            show: true,
            position: 'right',
            color: '#fff',
            fontSize: 12
          }
        }]
      }
      
      this.chart.setOption(option)
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  background: rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .chart-title {
    font-size: 16px;
    margin-bottom: 10px;
    flex: 0 0 auto;
    color: #fff;
    font-weight: 500;
    padding-left: 10px;
  }
  
  .chart {
    flex: 1;
    min-height: 0;
  }
}
</style> 